<template>
  <div class="dataA-overview">
    <el-card class="order-warning">
    <div slot="header" class="clearfix">
      <!-- 面包导航 -->
      <my-bread>订单预警</my-bread>
    </div>
    <div class="dataA-overview_top">
      <p>1.订单000000呵呵呵订单000000呵呵呵订单000000呵呵呵订单000000呵呵呵</p>
      <p>2.若有其他疑问, 可查看<span class="colorOrder-Blue">数据常见问题</span></p>
    </div>

    <div class="dataA-overview_box">
      <div class="dataA-overview_title flex">
        <h3>实时概况</h3><i class="el-icon-question"></i>
      </div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="dataA-overview_content1">

          <div class="flex_wrap">
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>

          </div>

          <div class="dataA-overview_charst">
             <line-chart :chart-data="lineChartData" height="200px" />
          </div>

        </div></el-col>
        <el-col :span="12"><div class="dataA-overview_content2">
          <div class="flex_wrap">
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>

          </div>
        </div></el-col>
      </el-row>
    </div>
    <el-divider></el-divider>

    <div class="dataA-overview_seatch flex_between">
        <el-radio-group v-model="radio1">
          <el-radio-button label="1">运营视窗</el-radio-button>
          <el-radio-button label="2">管理视窗</el-radio-button>
        </el-radio-group>

      <div class="dataA-overview_time">
        <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="时间筛选: ">

              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>

              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
      </div>
    </div>

    <div class="dataA-overview_box">
      <div class="dataA-overview_title flex">
        <h3>核心指标</h3><i class="el-icon-question"></i>
      </div>
      <div class="dataA-overview_tabs flex">
        <div class="dataA-overview_item select">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item select">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>
            <div class="dataA-overview_item">
              <div class="flex_align">
                <p class="name babaclor">支付金额</p><i class="el-icon-question babaclor"></i>
              </div>
              <span class="number">0</span>
              <p class="babaclor">
                昨日全天 : 0
              </p>
              <span class="babaclor">1</span>
            </div>

      </div>

      <div class="dataA-overview_charst">
        <line-chart :chart-data="lineChartData" />
      </div>
    </div>

    <div class="dataA-overview_box">
      <div class="dataA-overview_title flex">
        <h3>流量看板</h3><i class="el-icon-question"></i>
      </div>

      <div class="dataA-overview_h">流量质量指标</div>

      <div class="dataA-overview_c flex">
        <div class="dataA-overview_c_item">
          <div class="dataA-overview_item">
            <div class="flex_align">
              <p class="name babaclor">跳失率</p><i class="el-icon-question babaclor"></i>
            </div>
            <span class="number"> - </span>
            <p class="babaclor">
              昨日全天 : 0
            </p>
            <p class="babaclor">
              较上一周 : -
            </p>
            <!-- <span class="babaclor">1</span> -->
          </div>

          <div class="dataA-overview_charst">
            <line-chart :chart-data="lineChartData" height="150px"/>
          </div>
        </div>
        <div class="dataA-overview_c_item">
          <div class="dataA-overview_item">
            <div class="flex_align">
              <p class="name babaclor">跳失率</p><i class="el-icon-question babaclor"></i>
            </div>
            <span class="number"> - </span>
            <p class="babaclor">
              昨日全天 : 0
            </p>
            <p class="babaclor">
              较上一周 : -
            </p>
            <!-- <span class="babaclor">1</span> -->
          </div>

          <div class="dataA-overview_charst">
            <line-chart :chart-data="lineChartData" height="150px"/>
          </div>
        </div>
        <div class="dataA-overview_c_item">
          <div class="dataA-overview_item">
            <div class="flex_align">
              <p class="name babaclor">跳失率</p><i class="el-icon-question babaclor"></i>
            </div>
            <span class="number"> - </span>
            <p class="babaclor">
              昨日全天 : 0
            </p>
            <p class="babaclor">
              较上一周 : -
            </p>
            <!-- <span class="babaclor">1</span> -->
          </div>

          <div class="dataA-overview_charst">
            <line-chart :chart-data="lineChartData" height="150px"/>
          </div>
        </div>
      </div>

    </div>

    <div class="dataA-overview_box">
      <div class="dataA-overview_title flex">
        <h3>商品看板</h3><i class="el-icon-question"></i>
      </div>

      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple">
          <div class="dataA-overview_h">TOP5访问排行</div>

          <el-table
            :data="tableData1"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple">
          <div class="dataA-overview_h">TOP5支付排行</div>

           <el-table
            :data="tableData2"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </div></el-col>
      </el-row>
    </div>

  </el-card>
  </div>
</template>

<script>
import LineChart from '../Compoent/LineChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DataA-overview',
  components: {
    LineChart
  },
  data () {
    return {
      lineChartData: lineChartData.newVisitis,
      radio1: '1',
      form: {
        region: '',
        time: ''
      },
      tableData1: [],
      tableData2: []
    }
  }
}
</script>

<style lang="less" scoped>

// common
.dataA-overview_title{
  padding: 10px;
  background-color: #f8f8f8;
  align-items: center;
  margin: 20px 0;
  h3{
    border-left: 3px solid #fe7c0f;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 700;
  }
  i{
    color:#bababa;
  }
}
.babaclor{
  color:#bababa;
}

.flex_wrap{
  display: flex;
  flex-wrap: wrap;
}
.dataA-overview_item{
  // margin-bottom:10px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
  width: 50%;
  .name{
    padding-right:20px;
  }
  .number{
    font-size: 18px;
    font-weight: 700;
    padding: 8px 0;
  }
}

//
.dataA-overview_top{
  padding: 15px;
  background-color: #f8f8f8;
}

.dataA-overview_content1,.dataA-overview_content2{
  padding: 15px;
}
.dataA-overview_content1{
  border: 1px solid #ccc;
}
.dataA-overview_content2{
  background-color: #f0f2f5;
}

.dataA-overview_seatch{
  padding: 15px;
  background-color: #f8f8f8;
  .dataA-overview_time{
    .el-form-item{
      margin-bottom: 0;
    }
  }
}

.dataA-overview_tabs{
  width: 94%;
  margin: 0 auto 15px;
  height: 150px;
  .dataA-overview_item{
    width: 25%;
    padding: 15px 30px;
    height: 100%;
    border: 1px solid #f8f8f8;
    & + .dataA-overview_item{
      border-left: none;
    }
    &.select{
      border:2px solid #3287ff;
      background-color: #f5f8fd;
      & + .select{
        border-left: none;
      }
    }
  }
}

.dataA-overview_h{
  font-size: 16px;
  font-weight: 700;
  padding: 15px;
  background-color:#f8f8f8;
}
.dataA-overview_c_item{
  flex: 1;
  padding: 15px;
  .dataA-overview_item{
    height: 150px;
    padding-bottom: 0;

  }
}
</style>
